import React from "react";
import {Icon, Modal, Tabs, Toast} from "antd-mobile";
import './euro.css'
import Schedule from "./components/schedule";
import Point from "./components/point";
import Shooter from "./components/shooter";
import euroSrc from "../../res/images/web/euro/欧洲杯logo@2x.png"
import signSrc from "../../res/images/web/euro/签到有礼1@2x.png"
import signedSrc from "../../res/images/web/euro/签到有礼2@2x.png"
import signModalSrc from "../../res/images/web/euro/签到有礼-弹窗装饰@2x.png"
import signedModalSrc from "../../res/images/web/euro/恭喜你@2x.png"
import signModalBannerSrc from "../../res/images/web/euro/签到bg@2x.png"
import LocalStorageService from "../../utils/LocalStorageService";
import {checkGuideReq, finishGuideReq, getSignInfoReq, signReq} from "../../apis/goApis";
import juanSrc from '../../res/images/web/euro/卡券@2x.png'
import douSrc from '../../res/images/web/euro/签到-应豆@2x.png'
import checkedSrc from '../../res/images/web/euro/签到勾@2x.png'
import {test} from "../../utils/constants";
import {addLinkAndClick} from "../GradePlayer/GradePlayer";
import {checkAndGoBack} from "../best-line-up/best-line-up";
import {pushWithSearch} from "../mall/mall";
import lingSrc from "../../res/images/web/euro/领奖励@2x.png"
import coinSrc from "../../res/images/web/euro/金币@2x.png"
import baiSrc from "../../res/images/web/euro/vip抵用券@2x.png"
import mangheSrc from "../../res/images/web/euro/卡券@2x (1).png"
import baoxiangSrc from "../../res/images/web/euro/卡券@2x.png"
import guide1Src from "../../res/images/web/euro/指引1@2x.png"
import guide2Src from "../../res/images/web/euro/指引2@2x.png"
import guide3Src from "../../res/images/web/euro/指引3@2x.png"
import nextSrc from "../../res/images/web/euro/下一页@2x.png"
import prevSrc from "../../res/images/web/euro/上一页@2x.png"
import okSrc from "../../res/images/web/euro/我懂了@2x.png"
import callGuideSrc from "../../res/images/web/euro/玩法介绍@2x.png"


const log = console.log.bind(console)

class Euro extends React.Component {

    constructor(props) {
        super(props)
        this.searchParams = this.searchParams()
        this.uid = this.searchParams.webview === 'true' ? this.searchParams.uid : LocalStorageService.get('userid')
        this.tabs = [
            {title: '积分榜',},
            {title: '射手榜',},
            {title: '赛程',},
        ]
        this.signItems = [
            '金币x10',
            '百元抵用券x1',
            '金币x50',
            '盲盒抵用券x2',
            '金币x100',
            '盲盒抵用券x3',
            '包厢券x1',
            '金币x100',
        ]
        this.guideSrcs = [
            guide1Src,
            guide2Src,
            guide3Src,
        ]
        this.state = {
            day: 0,
            today: false,
            guided: false,
            guideIndex: 0,
            modal: {
                sign: false,
                signed: false,
                guide: false,
            }
        }
    }

    componentDidMount() {
        if (this.uid) {
            this.getSignInfo(() => {
                const today = this.state.today
                log('今天是否签到', today)
                if (today === false) {
                    this.callModal('sign')
                }
            })
        }
        this.checkGuideModal()
    }

    checkGuideModal = () => {
        if (this.uid) {
            checkGuideReq({
                Uid: this.uid,
            }).then(res => {
                const data = res.data
                if (data.ok === 1) {
                    const guided = data.res === 2
                    if (!guided) {
                        this.callModal('guide')
                    }
                }
            })
            // this.callModal('guide')
        } else {
            this.callModal('guide')
        }
    }

    searchParams = () => {
        const search = window.location.search
            .slice(1)
            .split('&')
            .map(keyValue => {
                return keyValue.split('=')
            })
            .reduce((acc, cur) => {
                acc[cur[0]] = cur[1]
                return acc
            }, {})
        return search
    }

    getSignInfo = (callback = () => {}) => {
        getSignInfoReq({
            Uid: this.uid,
        })
            .then(res => {
                const data = res.data
                if (data.ok) {
                    const day = data.day
                    const today = data.today === 1
                    this.setState({
                        day,
                        today,
                    }, () => callback())
                }

            })
    }

    sign = () => {
        if (this.uid) {
            signReq({
                Uid: this.uid,
            })
                .then(res => {
                    if (res.data.ok === 1) {
                        this.getSignInfo(() => this.callModal('signed'))
                        this.cancelModal('sign')
                    }
                })
        } else {
            Toast.info('请先登录')
        }

    }

    callModal = (key) => {
        this.setState({
            modal: {
                ...this.state.modal,
                [key]: true,
            }
        })
    }

    cancelModal = (key) => {
        this.setState({
            modal: {
                ...this.state.modal,
                [key]: false,
            }
        })
    }

    goTo = (end) => {
        let base = 'http://www.youtoball.com:8080/'
        if (test) {
            base = 'http://123.207.85.242:8080/'
        }
        addLinkAndClick(base + end)
    }

    goToPrice = () => {
        const day = this.state.day
        let base = 'http://www.youtoball.com:8080/'
        if (test) {
            base = 'http://123.207.85.242:8080/'
        }

        const index = day - 1
        if ([0, 2, 4, 7].includes(index)) {
            // iconSrc = coinSrc
            addLinkAndClick(base + 'game')
        } else if (index === 1) {
            // iconSrc = baiSrc
            addLinkAndClick(base + 'vip-goods')
        } else if ([3, 5].includes(index)) {
            // iconSrc = mangheSrc
            // txt = '可前往“我的-卡券”查看详情'
            addLinkAndClick(base + 'game')
        } else if (index === 6) {
            // iconSrc = baoxiangSrc
            addLinkAndClick(base + 'game')
        } else if (index > 7) {
            addLinkAndClick(base + 'game')
        }

        // if (day === 2) {
        //     addLinkAndClick(base + 'vip-goods')
        // } else if (day === 3) {
        //     // end = 'mall'
        //     if (this.searchParams.webview === 'true') {
        //         addLinkAndClick(base + 'euro_mall')
        //     } else {
        //         addLinkAndClick(base + 'mall')
        //     }
        //
        // } else {
        //     addLinkAndClick(base + 'game')
        // }
        // let end = 'game'
        // if (day === 3) {
        //     end = 'mall'
        // }
        // this.goTo(end)
        // pushWithSearch(this.props.history, './my-euro-plan')
    }

    goToGame = () => {
        // this.goTo('game')
        checkAndGoBack(this.props.history, './game')
    }

    prevGuide = () => {
        this.setState({
            guideIndex: this.state.guideIndex - 1,
        })
    }

    nextGuide = () => {
        this.setState({
            guideIndex: this.state.guideIndex + 1,
        })
    }

    finishGuide = () => {
        if (this.uid) {
            finishGuideReq({
                Uid: this.uid,
            }).then(res => {
                if (res.data.ok) {
                    this.checkGuideModal()
                }
            })
        }
        this.cancelModal('guide')
    }

    render() {
        const day = this.state.day
        let price = this.signItems[day - 1]
        if (day - 1 > 7) {
            price = this.signItems[7]
        }
        const guideSrcs = this.guideSrcs
        const guideIndex = this.state.guideIndex
        const guideSrc = guideSrcs[guideIndex]

        let iconSrc = ''
        let txt = ''
        // let txt = '可前往“任务-今日任务-我的应豆”查看详情' : '可前往“我的-卡券”查看详情'
        const iconIndex = day - 1
        if ([0, 2, 4, 7].includes(iconIndex)) {
            iconSrc = coinSrc
            txt = '可前往“我的-金币”查看详情'
        } else if (iconIndex === 1) {
            iconSrc = baiSrc
            txt = '可前往“我的-卡券”查看详情'
        } else if ([3, 5].includes(iconIndex)) {
            iconSrc = mangheSrc
            txt = '可前往“我的-卡券”查看详情'
        } else if (iconIndex === 6) {
            iconSrc = baoxiangSrc
            txt = '可前往“我的-卡券”查看详情'
        } else if (iconIndex > 7) {
            iconSrc = coinSrc
            txt = '可前往“我的-金币”查看详情'
        }

        return (
            <>
                <Modal
                    visible={this.state.modal.guide}
                    onClose={() => this.cancelModal('guide')}
                    className='sign-modal'
                    wrapClassName='sign-modal-wrapper'
                    transparent
                    maskClosable
                >
                    <div className='euro-guide-container'>
                        <img src={guideSrc} alt='' className='euro-guide-img' />
                        {guideIndex !== 0 && <img src={prevSrc} alt='' className='euro-guide-button euro-guide-prev-button' onClick={this.prevGuide} />}
                        <img src={nextSrc} alt='' className='euro-guide-button euro-guide-next-button' onClick={this.nextGuide}/>
                        {guideIndex === 2 && <img src={okSrc} alt='' className='euro-guide-button euro-guide-next-button' onClick={this.finishGuide}/>}
                    </div>

                </Modal>
                <Modal
                    visible={this.state.modal.sign}
                    maskClosable
                    // popup
                    transparent
                    onClose={() => this.cancelModal('sign')}
                    className='sign-modal'
                    wrapClassName='sign-modal-wrapper'
                >
                    <div className='sign-modal-content'>
                        <img
                            src={signModalSrc}
                            alt=''
                            className='sign-modal-logo'
                        />
                        <div className='sign-modal-banner'>
                            <img
                                src={signModalBannerSrc}
                                alt=''
                            />
                            <span>
                                已签<em>{this.state.day}</em>天
                            </span>
                        </div>
                        <div className='sign-modal-content-main'>
                            <div className='flex-space-between-align-center flex-wrap-container'>
                                {this.signItems.map((item, index) => {
                                    const day = this.state.day
                                    const signed = (index + 1) <= day
                                    let iconSrc = ''
                                    if ([0, 2, 4, 7].includes(index)) {
                                        iconSrc = coinSrc
                                    } else if (index === 1) {
                                        iconSrc = baiSrc
                                    } else if ([3, 5].includes(index)) {
                                        iconSrc = mangheSrc
                                    } else if (index === 6) {
                                        iconSrc = baoxiangSrc
                                    }
                                    return <div
                                        className={signed ? 'sign-modal-item sign-modal-item-signed' : 'sign-modal-item'}
                                        key={index}
                                        style={{
                                            background: (index === 1 || index === 6) && !signed ? '#FFF2DB' : '',
                                        }}
                                    >
                                        {index + 1 < 8 && <p
                                            style={{
                                                color: (index === 1 || index === 6) ? '#F29100' : '',
                                            }}
                                        >累计{index + 1}天</p>}
                                        {index + 1 === 8 && <p>累计>7天</p>}
                                        {signed
                                            ? <div className='sign-modal-item-text'>
                                                <img alt='' src={checkedSrc}/>
                                                <p>已签到</p>
                                            </div>
                                            : <img alt='' src={iconSrc}/>
                                        }
                                        <span>{item}</span>
                                    </div>
                                })}
                            </div>
                            {
                                this.state.today
                                    ? <button className='signed-modal-btn'>
                                        今日已签
                                    </button>
                                    : <button
                                        className='sign-modal-btn'
                                        onClick={this.sign}
                                    >
                                        签到
                                    </button>
                            }
                        </div>
                    </div>
                </Modal>

                <Modal
                    visible={this.state.modal.signed}
                    maskClosable
                    // popup
                    transparent
                    onClose={() => this.cancelModal('signed')}
                    className='sign-modal'
                    wrapClassName='sign-modal-wrapper'
                >
                    <div className='signed-modal-content'>
                        <img
                            src={signedModalSrc}
                            alt=''
                            className='signed-modal-logo'
                        />
                        <p className='signed-modal-title'>
                            获得{price && price.split('x')[0]}
                        </p>
                        <div className='signed-modal-price mg-b-24px'>
                            <img src={iconSrc} alt=''/>
                            <p>{price}</p>
                        </div>
                        <p className='mg-b-16px'>{txt}</p>
                        <div className='flex-space-between-align-center mg-t-16px'>
                            <button
                                className='signed-modal-button-left'
                                onClick={() => this.cancelModal('signed')}
                            >
                                我知道了
                            </button>
                            <button
                                className='signed-modal-button-right'
                                onClick={this.goToPrice}
                            >
                                立即使用
                            </button>
                        </div>
                    </div>
                </Modal>

                <div className='euro-header'>
                    <div className='flex-space-between-align-center'>
                        <div className='flex-align-center'>
                            {this.searchParams.webview === 'true' ? null : <Icon type={'left'} size='lg' color='#fff' onClick={this.goToGame}/>}
                            <img src={euroSrc} className='euro-header-logo' alt=''/>
                            <div>
                                <div className='flex flex-align-center'>
                                    <p className='euro-header-title'>
                                        欧洲国家杯
                                    </p>
                                    <img
                                        src={callGuideSrc}
                                        alt=''
                                        style={{width: 16, height: 16, marginLeft: '4px',}}
                                        onClick={() => {
                                            this.setState({
                                                guideIndex: 0,
                                            }, () => this.callModal('guide'))
                                        }}
                                    />
                                </div>

                                <span className='euro-header-year'>
                                    2019-2021
                                </span>
                            </div>
                        </div>

                        <div
                            className='euro-header-sign-btn flex-space-between-align-center'
                            onClick={() => this.callModal('sign')}
                        >
                            {!this.state.today && <img src={lingSrc} alt='' className='euro-header-sign-btn-ling'/>}
                            <img src={this.state.today ? signedSrc : signSrc} alt='' />
                            <span>{day === 0 ? '签到有礼' : `已签 ${day} 天`}</span>
                        </div>
                    </div>

                </div>
                <Tabs
                    tabs={this.tabs}
                    tabBarBackgroundColor='#183041'
                    tabBarActiveTextColor='#FFFFFF'
                    tabBarUnderlineStyle={{border: '2px #36C8B9 solid'}}
                    tabBarInactiveTextColor='rgba(255, 255, 255, 0.4)'
                    tabBarTextStyle={{fontSize: '14px',}}
                    initialPage={2}
                    swipeable={false}
                >
                    <Point />
                    <Shooter />
                    <Schedule />
                </Tabs>
            </>
        )
    }
}

export default Euro